﻿<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="utf-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=9; IE=8; IE=7; IE=EDGE">
	<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
	<title>乐优商城--商品详情页</title>
	<link rel="icon" href="/assets/img/favicon.ico">

	<link rel="stylesheet" type="text/css" href="/css/webbase.css" />
	<link rel="stylesheet" type="text/css" href="/css/pages-item.css" />
	<link rel="stylesheet" type="text/css" href="/css/pages-zoom.css" />
	<link rel="stylesheet" type="text/css" href="/css/widget-cartPanelView.css" />

	<style type="text/css">
		.goods-intro-list li {
			display: inline-block;
			width: 300px;
		}
		.Ptable {
			margin: 10px 0;
		}
		.Ptable-item {
			padding: 12px 0;
			line-height: 220%;
			color: #999;
			font-size: 12px;
			border-bottom: 1px solid #eee;
		}
		.Ptable-item h3 {
			width: 110px;
			text-align: right;
		}
		.Ptable-item h3, .package-list h3 {
			font-weight: 400;
			font-size: 12px;
			float: left;
		}
		h3 {
			display: block;
			font-size: 1.17em;
			-webkit-margin-before: 1em;
			-webkit-margin-after: 1em;
			-webkit-margin-start: 0px;
			-webkit-margin-end: 0px;
			font-weight: bold;
		}
		.Ptable-item dl {
			margin-left: 110px;
		}
		dl {
			display: block;
			-webkit-margin-before: 1em;
			-webkit-margin-after: 1em;
			-webkit-margin-start: 0px;
			-webkit-margin-end: 0px;
		}
		.Ptable-item dt {
			width: 160px;
			float: left;
			text-align: right;
			padding-right: 5px;
		}
		.Ptable-item dd {
			margin-left: 210px;
		}
		dd {
			display: block;
			-webkit-margin-start: 40px;
		}
		.package-list {
			padding: 12px 0;
			line-height: 220%;
			color: #999;
			font-size: 12px;
			margin-top: -1px;
		}
		.package-list h3 {
			width: 130px;
			text-align: right;
		}
		.package-list p {
			margin-left: 155px;
			padding-right: 50px;
		}
	</style>

</head>

<body>

<!-- 头部栏位 -->
<!--页面顶部，由js动态加载-->
<div id="itemApp">
	<div id="nav-bottom">
		<ly-top/>
	</div>
	<div class="py-container">
		<div id="item">
			<div class="crumb-wrap">
				<ul class="sui-breadcrumb">
					<li>
						<a href="#">手机</a>
					</li>
					<li>
						<a href="#">手机通讯</a>
					</li>
					<li>
						<a href="#">手机</a>
					</li>
					<li>
						<a href="#">魅族（MEIZU）</a>
					</li>
					<li class="active">魅族 魅蓝X 3GB+32GB 全网通公开版 </li>
				</ul>
			</div>
			<!--product-info-->
			<div class="product-info">
				<div class="fl preview-wrap">
					<!--放大镜效果-->
					<div class="zoom">
						<!--默认第一个预览-->
						<div id="preview" class="spec-preview">
							<span class="jqzoom">
								<img :jqimg="images[0]" :src="images[0]" width="400px" height="400px"/>
							</span>
						</div>
						<!--下方的缩略图-->
						<div class="spec-scroll">
							<a class="prev">&lt;</a>
							<!--左右按钮-->
							<div class="items">
								<ul>
									<li v-for="img in images">
										<img :src="img" :bimg="img" onmousemove="preview(this)"/>
									</li>
								</ul>
							</div>
							<a class="next">&gt;</a>
						</div>
					</div>
				</div>
				<div class="fr itemInfo-wrap">
					<div class="sku-name">
						<h4 v-text="sku.title"></h4>
					</div>
					<div class="news"><span>MTK P20芯片，5.5英寸全高清夏普屏！<a href='https://sale.jd.com/act/InqRKmz0tg.html' target='_blank'>魅蓝6秒杀大促，直降至599抢购！</a></span></div>
					<div class="summary">
						<div class="summary-wrap">
							<div class="fl title"><i>价　　格</i></div>
							<div class="fl price">
								<i>¥</i><em v-text="ly.formatPrice(sku.price)"></em><span>降价通知</span>
							</div>
							<div class="fr remark"><i>累计评价</i><em>612188</em></div>
						</div>
						<div class="summary-wrap">
							<div class="fl title">
								<i>促　　销</i>
							</div>
							<div class="fl fix-width">
								<i class="red-bg">加价购</i>
								<em class="t-gray">满999.00另加20.00元，或满1999.00另加30.00元，或满2999.00另加40.00元，即可在购物车换
									购热销商品</em>
							</div>
						</div>
					</div>
					<div class="support">
						<div class="summary-wrap">
							<div class="fl title">
								<i>支　　持</i>
							</div>
							<div class="fl fix-width">
								<em class="t-gray">以旧换新，闲置手机回收 4G套餐超值抢 礼品购</em>
							</div>
						</div>
						<div class="summary-wrap">
							<div class="fl title">
								<i>配 送 至</i>
							</div>
							<div class="fl fix-width">
								<em class="t-gray">上海 <span v-text="sku.stock > 0 ? '有货' : '缺货'"></span></em>
							</div>
						</div>
					</div>
					<div class="clearfix choose">
						<div id="specification" class="summary-wrap clearfix">
							<dl v-for="(options,id) in specialSpec" :key="id">
								<dt>
									<div class="fl title">
										<i v-text="params[id]"></i>
									</div>
								</dt>
								<dd v-for="(o,i) in options" :key="i" @click="selectSku(id,i)">
									<a href="javascript:;" :class="{selected:i === indexes[id], locked:locked(id, i)}">
										{{o}}<span title="点击取消选择">&nbsp;</span>
									</a>
								</dd>
							</dl>
						</div>

						<div class="summary-wrap">
							<div class="fl title">
								<div class="control-group">
									<div class="controls">
										<input autocomplete="off" type="text" disabled v-model="num" minnum="1"
											   class="itxt"/>
										<a href="javascript:void(0)" class="increment plus" @click="increment">+</a>
										<a href="javascript:void(0)" class="increment mins" @click="decrement">-</a>
									</div>
								</div>
							</div>
							<div class="fl">
								<ul class="btn-choose unstyled">
									<li>
										<a href="#" @click.prevent="addCart" target="_blank"
										   class="sui-btn  btn-danger addshopcar">加入购物车</a>
									</li>
								</ul>
							</div>
						</div>
					</div>
				</div>
			</div>
			<!--product-detail-->
			<div class="clearfix product-detail">
				<div class="fl aside">
					<ul class="sui-nav nav-tabs tab-wraped">
						<li class="active">
							<a href="#index" data-toggle="tab">
								<span>相关分类</span>
							</a>
						</li>
						<li>
							<a href="#profile" data-toggle="tab">
								<span>推荐品牌</span>
							</a>
						</li>
					</ul>
					<div class="tab-content tab-wraped">
						<div id="index" class="tab-pane active">
							<ul class="part-list unstyled">
								<li>手机</li>
								<li>手机壳</li>
								<li>内存卡</li>
								<li>Iphone配件</li>
								<li>贴膜</li>
								<li>手机耳机</li>
								<li>移动电源</li>
								<li>平板电脑</li>
							</ul>
							<ul class="goods-list unstyled">
								<li>
									<div class="list-wrap">
										<div class="p-img">
											<img src="/img/_/part01.png"/>
										</div>
										<div class="attr">
											<em>Apple苹果iPhone 6s (A1699)</em>
										</div>
										<div class="price">
											<strong>
												<em>¥</em>
												<i>6088.00</i>
											</strong>
										</div>
										<div class="operate">
											<a href="javascript:void(0);" class="sui-btn btn-bordered">加入购物车</a>
										</div>
									</div>
								</li>
								<li>
									<div class="list-wrap">
										<div class="p-img">
											<img src="/img/_/part02.png"/>
										</div>
										<div class="attr">
											<em>Apple苹果iPhone 6s (A1699)</em>
										</div>
										<div class="price">
											<strong>
												<em>¥</em>
												<i>6088.00</i>
											</strong>
										</div>
										<div class="operate">
											<a href="javascript:void(0);" class="sui-btn btn-bordered">加入购物车</a>
										</div>
									</div>
								</li>
								<li>
									<div class="list-wrap">
										<div class="p-img">
											<img src="/img/_/part03.png"/>
										</div>
										<div class="attr">
											<em>Apple苹果iPhone 6s (A1699)</em>
										</div>
										<div class="price">
											<strong>
												<em>¥</em>
												<i>6088.00</i>
											</strong>
										</div>
										<div class="operate">
											<a href="javascript:void(0);" class="sui-btn btn-bordered">加入购物车</a>
										</div>
									</div>
									<div class="list-wrap">
										<div class="p-img">
											<img src="/img/_/part02.png"/>
										</div>
										<div class="attr">
											<em>Apple苹果iPhone 6s (A1699)</em>
										</div>
										<div class="price">
											<strong>
												<em>¥</em>
												<i>6088.00</i>
											</strong>
										</div>
										<div class="operate">
											<a href="javascript:void(0);" class="sui-btn btn-bordered">加入购物车</a>
										</div>
									</div>
									<div class="list-wrap">
										<div class="p-img">
											<img src="/img/_/part03.png"/>
										</div>
										<div class="attr">
											<em>Apple苹果iPhone 6s (A1699)</em>
										</div>
										<div class="price">
											<strong>
												<em>¥</em>
												<i>6088.00</i>
											</strong>
										</div>
										<div class="operate">
											<a href="javascript:void(0);" class="sui-btn btn-bordered">加入购物车</a>
										</div>
									</div>
								</li>
							</ul>
						</div>
						<div id="profile" class="tab-pane">
							<p>推荐品牌</p>
						</div>
					</div>
				</div>
				<div class="fr detail">
					<div class="clearfix fitting">
						<h4 class="kt">选择搭配</h4>
						<div class="good-suits">
							<div class="fl master">
								<div class="list-wrap">
									<div class="p-img">
										<img src="/img/_/l-m01.png"/>
									</div>
									<em>￥5299</em>
									<i>+</i>
								</div>
							</div>
							<div class="fl suits">
								<ul class="suit-list">
									<li class="">
										<div id="e">
											<img src="/img/_/dp01.png"/>
										</div>
										<i>Feless费勒斯VR</i>
										<label data-toggle="checkbox" class="checkbox-pretty">
											<input type="checkbox"><span>39</span>
										</label>
									</li>
									<li class="">
										<div id=""><img src="/img/_/dp02.png"/></div>
										<i>Feless费勒斯VR</i>
										<label data-toggle="checkbox" class="checkbox-pretty">
											<input type="checkbox"><span>50</span>
										</label>
									</li>
									<li class="">
										<div id=""><img src="/img/_/dp03.png"/></div>
										<i>Feless费勒斯VR</i>
										<label data-toggle="checkbox" class="checkbox-pretty">
											<input type="checkbox"><span>59</span>
										</label>
									</li>
									<li class="">
										<div id=""><img src="/img/_/dp04.png"/></div>
										<i>Feless费勒斯VR</i>
										<label data-toggle="checkbox" class="checkbox-pretty">
											<input type="checkbox"><span>99</span>
										</label>
									</li>
								</ul>
							</div>
							<div class="fr result">
								<div class="num">已选购0件商品</div>
								<div class="price-tit"><strong>套餐价</strong></div>
								<div class="price">￥5299</div>
								<button class="sui-btn  btn-danger addshopcar">加入购物车</button>
							</div>
						</div>
					</div>
					<div class="tab-main intro">
						<ul class="sui-nav nav-tabs tab-wraped">
							<li class="active">
								<a href="#one" data-toggle="tab">
									<span>商品介绍</span>
								</a>
							</li>
							<li>
								<a href="#two" data-toggle="tab">
									<span>规格与包装</span>
								</a>
							</li>
							<li>
								<a href="#three" data-toggle="tab">
									<span>售后保障</span>
								</a>
							</li>
							<li>
								<a href="#four" data-toggle="tab">
									<span>商品评价</span>
								</a>
							</li>
							<li>
								<a href="#five" data-toggle="tab">
									<span>手机社区</span>
								</a>
							</li>
						</ul>
						<div class="clearfix"></div>
						<div class="tab-content tab-wraped">
							<div id="one" class="tab-pane active">
								<ul class="goods-intro-list unstyled" style="list-style: none;">
									<li>分辨率：1920*1080(FHD)</li>
									<li>后置摄像头：1200万像素</li>
									<li>前置摄像头：500万像素</li>
									<li>核 数：其他</li>
									<li>频 率：以官网信息为准</li>
									<li>品牌： Apple</li>
									<li>商品名称：APPLEiPhone 6s Plus</li>
									<li>商品编号：1861098</li>
									<li>商品毛重：0.51kg</li>
									<li>商品产地：中国大陆</li>
									<li>热点：指纹识别，Apple Pay，金属机身，拍照神器</li>
									<li>系统：苹果（IOS）</li>
									<li>像素：1000-1600万</li>
									<li>机身内存：64GB</li>
								</ul>
								<!--商品详情-->
								<div class="intro-detail">
									<div><div style="TEXT-ALIGN: center;"> 
 <img id="detail-tag-id-1" name="detail-tag-id-1" alt="" src="//img20.360buyimg.com/vc/jfs/t3775/24/2020862872/217972/f8fbfa24/583e6af9Ne8c4d45e.jpg" text="商品介绍" /> 
 <img src="//img20.360buyimg.com/vc/jfs/t3142/36/4301687165/248506/86b65b9c/583f8af9Nbdec2f2a.jpg" /> 
 <img src="//img20.360buyimg.com/vc/jfs/t4078/185/124092828/288959/a48435ee/583e6afbNe1aa9b5c.jpg" /> 
 <img src="//img20.360buyimg.com/vc/jfs/t3163/361/4255296119/262604/660ae8b9/583e6afcNc210f62b.jpg" /> 
 <img src="//img20.360buyimg.com/vc/jfs/t3652/6/2093213626/90848/c3ea8764/583e6afdN0bf6dab8.jpg" /> 
 <img src="//img20.360buyimg.com/vc/jfs/t4045/241/204433324/132170/c2c6b2a2/584415a3N43b6065d.jpg" /> 
 <img id="detail-tag-id-2" name="detail-tag-id-2" alt="" src="//img20.360buyimg.com/vc/jfs/t14365/186/2456901241/84901/91394bab/5aa6121fN62eb6762.jpg" text="系统展示" /> 
 <img id="detail-tag-id-3" name="detail-tag-id-3" alt="" src="//img20.360buyimg.com/vc/jfs/t3640/253/2053672296/90969/42df3d6d/583e6afeN58cbb9fb.jpg" text="实拍图赏" /> 
 <img src="//img20.360buyimg.com/vc/jfs/t3349/90/2040296749/216983/2f2bfc90/583e6affN74c8a935.jpg" /> 
 <img id="detail-tag-id-4" name="detail-tag-id-4" alt="" src="//img20.360buyimg.com/vc/jfs/t3499/326/2063394151/223428/9c496631/583e6b00N00975270.jpg" text="规格参数" /> 
 <img src="//img20.360buyimg.com/vc/jfs/t8239/329/1946724695/131540/5ad2d645/59c0df95N2b0c3631.jpg" /> 
 <div></div> 
</div><br/></div>
								</div>
							</div>
							<div id="two" class="tab-pane">
								<div class="Ptable">
									<div class="Ptable-item" v-for="group in specGroups" :key="group.id">
										<h3 v-text="group.name"></h3>
										<dl>
            <span v-for="param in group.params" :key="param.id">
				<dt v-text="param.name"></dt><dd v-text="param.value + (param.unit || '')"></dd>
			</span>
										</dl>
									</div>
								</div>
								<div class="package-list">
									<h3>包装清单</h3>
									<p>主机 x 1、电源适配器 x 1、保修证书 x 1、SIM卡顶针 x 1、数据线 x 1</p>
								</div>

							</div>
							<div id="three" class="tab-pane">
								<p>本产品全国联保，享受三包服务，质保期为：一年质保</p>
							</div>
							<div id="four" class="tab-pane">
								<p>商品评价</p>
							</div>
							<div id="five" class="tab-pane">
								<p>手机社区</p>
							</div>
						</div>
					</div>
				</div>
			</div>
			<!--like-->
			<div class="clearfix"></div>
			<div class="like">
				<h4 class="kt">猜你喜欢</h4>
				<div class="like-list">
					<ul class="yui3-g">
						<li class="yui3-u-1-6">
							<div class="list-wrap">
								<div class="p-img">
									<img src="/img/_/itemlike01.png"/>
								</div>
								<div class="attr">
									<em>DELL戴尔Ins 15MR-7528SS 15英寸 银色 笔记本</em>
								</div>
								<div class="price">
									<strong>
										<em>¥</em>
										<i>3699.00</i>
									</strong>
								</div>
								<div class="commit">
									<i class="command">已有6人评价</i>
								</div>
							</div>
						</li>
						<li class="yui3-u-1-6">
							<div class="list-wrap">
								<div class="p-img">
									<img src="/img/_/itemlike02.png"/>
								</div>
								<div class="attr">
									<em>Apple苹果iPhone 6s/6s Plus 16G 64G 128G</em>
								</div>
								<div class="price">
									<strong>
										<em>¥</em>
										<i>4388.00</i>
									</strong>
								</div>
								<div class="commit">
									<i class="command">已有700人评价</i>
								</div>
							</div>
						</li>
						<li class="yui3-u-1-6">
							<div class="list-wrap">
								<div class="p-img">
									<img src="/img/_/itemlike03.png"/>
								</div>
								<div class="attr">
									<em>DELL戴尔Ins 15MR-7528SS 15英寸 银色 笔记本</em>
								</div>
								<div class="price">
									<strong>
										<em>¥</em>
										<i>4088.00</i>
									</strong>
								</div>
								<div class="commit">
									<i class="command">已有700人评价</i>
								</div>
							</div>
						</li>
						<li class="yui3-u-1-6">
							<div class="list-wrap">
								<div class="p-img">
									<img src="/img/_/itemlike04.png"/>
								</div>
								<div class="attr">
									<em>DELL戴尔Ins 15MR-7528SS 15英寸 银色 笔记本</em>
								</div>
								<div class="price">
									<strong>
										<em>¥</em>
										<i>4088.00</i>
									</strong>
								</div>
								<div class="commit">
									<i class="command">已有700人评价</i>
								</div>
							</div>
						</li>
						<li class="yui3-u-1-6">
							<div class="list-wrap">
								<div class="p-img">
									<img src="/img/_/itemlike05.png"/>
								</div>
								<div class="attr">
									<em>DELL戴尔Ins 15MR-7528SS 15英寸 银色 笔记本</em>
								</div>
								<div class="price">
									<strong>
										<em>¥</em>
										<i>4088.00</i>
									</strong>
								</div>
								<div class="commit">
									<i class="command">已有700人评价</i>
								</div>
							</div>
						</li>
						<li class="yui3-u-1-6">
							<div class="list-wrap">
								<div class="p-img">
									<img src="/img/_/itemlike06.png"/>
								</div>
								<div class="attr">
									<em>DELL戴尔Ins 15MR-7528SS 15英寸 银色 笔记本</em>
								</div>
								<div class="price">
									<strong>
										<em>¥</em>
										<i>4088.00</i>
									</strong>
								</div>
								<div class="commit">
									<i class="command">已有700人评价</i>
								</div>
							</div>
						</li>
					</ul>
				</div>
			</div>
		</div>
	</div>

</div>
<script src="/js/vue/vue.js"></script>
<script src="/js/axios.min.js"></script>
<script src="/js/common.js"></script>

<script>
	const specialSpec = JSON.parse("{\"4\":[\"\u73E0\u5149\u767D\",\"\u6D41\u5149\u91D1\"],\"12\":[\"3GB\"],\"13\":[\"32GB\"]}");
	const genericSpec = JSON.parse("{\"1\":\"\u9B45\u65CF\uFF08MEIZU\uFF09\",\"2\":\"\u9B45\u84DDX\",\"3\":2016.0,\"5\":165,\"6\":\"\u5176\u5B83\",\"7\":\"Android\",\"8\":\"\u8054\u53D1\u79D1\uFF08MTK\uFF09\",\"9\":\"P20\uFF08MT6757\uFF09\",\"10\":\"\u516B\u6838\",\"11\":2.3,\"14\":5.5,\"15\":\"1920*1080(FHD)\",\"16\":500.0,\"17\":1200.0,\"18\":3200.0}");
	const skus = [{"id":3699849,"spuId":10,"title":"\u9B45\u65CF \u9B45\u84DDX 3GB+32GB \u5168\u7F51\u901A\u516C\u5F00\u7248 \u6D41\u5149\u91D1 \u79FB\u52A8\u8054\u901A\u7535\u4FE14G\u624B\u673A \u53CC\u5361\u53CC\u5F85","images":"http:\/\/image.leyou.com\/images\/1\/9\/1524297328173.jpg","price":89900,"ownSpec":"{\"4\":\"\u6D41\u5149\u91D1\",\"12\":\"3GB\",\"13\":\"32GB\"}","indexes":"1_0_0","enable":true,"createTime":"2018-04-21T15:55:28.000+08:00","lastUpdateTime":"2018-04-21T15:55:28.000+08:00","stock":9999},{"id":4112338,"spuId":10,"title":"\u9B45\u65CF \u9B45\u84DDX 3GB+32GB \u5168\u7F51\u901A\u516C\u5F00\u7248 \u73E0\u5149\u767D \u79FB\u52A8\u8054\u901A\u7535\u4FE14G\u624B\u673A \u53CC\u5361\u53CC\u5F85","images":"http:\/\/image.leyou.com\/images\/13\/7\/1524297327635.jpg","price":89900,"ownSpec":"{\"4\":\"\u73E0\u5149\u767D\",\"12\":\"3GB\",\"13\":\"32GB\"}","indexes":"0_0_0","enable":true,"createTime":"2018-04-21T15:55:28.000+08:00","lastUpdateTime":"2018-04-21T15:55:28.000+08:00","stock":9999}];
	const specs = [{"id":1,"cid":76,"name":"\u4E3B\u4F53","params":[{"id":1,"cid":76,"groupId":1,"name":"\u54C1\u724C","numeric":false,"unit":"","generic":true,"searching":false,"segments":""},{"id":2,"cid":76,"groupId":1,"name":"\u578B\u53F7","numeric":false,"unit":"","generic":true,"searching":false,"segments":""},{"id":3,"cid":76,"groupId":1,"name":"\u4E0A\u5E02\u5E74\u4EFD","numeric":true,"unit":"\u5E74","generic":true,"searching":false,"segments":""}]},{"id":2,"cid":76,"name":"\u57FA\u672C\u4FE1\u606F","params":[{"id":4,"cid":76,"groupId":2,"name":"\u673A\u8EAB\u989C\u8272","numeric":false,"unit":"","generic":false,"searching":false,"segments":""},{"id":5,"cid":76,"groupId":2,"name":"\u673A\u8EAB\u91CD\u91CF\uFF08g\uFF09","numeric":true,"unit":"g","generic":true,"searching":false,"segments":""},{"id":6,"cid":76,"groupId":2,"name":"\u673A\u8EAB\u6750\u8D28\u5DE5\u827A","numeric":false,"unit":"","generic":true,"searching":false,"segments":""}]},{"id":3,"cid":76,"name":"\u64CD\u4F5C\u7CFB\u7EDF","params":[{"id":7,"cid":76,"groupId":3,"name":"\u64CD\u4F5C\u7CFB\u7EDF","numeric":false,"unit":"","generic":true,"searching":true,"segments":""}]},{"id":4,"cid":76,"name":"\u4E3B\u82AF\u7247","params":[{"id":8,"cid":76,"groupId":4,"name":"CPU\u54C1\u724C","numeric":false,"unit":"","generic":true,"searching":true,"segments":""},{"id":9,"cid":76,"groupId":4,"name":"CPU\u578B\u53F7","numeric":false,"unit":"","generic":true,"searching":false,"segments":""},{"id":10,"cid":76,"groupId":4,"name":"CPU\u6838\u6570","numeric":false,"unit":"","generic":true,"searching":true,"segments":""},{"id":11,"cid":76,"groupId":4,"name":"CPU\u9891\u7387","numeric":true,"unit":"GHz","generic":true,"searching":true,"segments":"0-1.0,1.0-1.5,1.5-2.0,2.0-2.5,2.5-"}]},{"id":5,"cid":76,"name":"\u5B58\u50A8","params":[{"id":12,"cid":76,"groupId":5,"name":"\u5185\u5B58","numeric":false,"unit":"","generic":false,"searching":true,"segments":""},{"id":13,"cid":76,"groupId":5,"name":"\u673A\u8EAB\u5B58\u50A8","numeric":false,"unit":"","generic":false,"searching":true,"segments":""}]},{"id":6,"cid":76,"name":"\u6444\u50CF\u5934","params":[{"id":16,"cid":76,"groupId":6,"name":"\u524D\u7F6E\u6444\u50CF\u5934","numeric":true,"unit":"\u4E07","generic":true,"searching":true,"segments":"0-500,500-1000,1000-1500,1500-2000,2500-"},{"id":17,"cid":76,"groupId":6,"name":"\u540E\u7F6E\u6444\u50CF\u5934","numeric":true,"unit":"\u4E07","generic":true,"searching":true,"segments":"0-500,500-1000,1000-1500,1500-2000,2500-"}]},{"id":7,"cid":76,"name":"\u7535\u6C60\u4FE1\u606F","params":[{"id":18,"cid":76,"groupId":7,"name":"\u7535\u6C60\u5BB9\u91CF\uFF08mAh\uFF09","numeric":true,"unit":"mAh","generic":true,"searching":true,"segments":"0-2000,2000-3000,3000-4000,4000-"}]},{"id":11,"cid":76,"name":"\u5C4F\u5E55","params":[{"id":14,"cid":76,"groupId":11,"name":"\u4E3B\u5C4F\u5E55\u5C3A\u5BF8\uFF08\u82F1\u5BF8\uFF09","numeric":true,"unit":"\u82F1\u5BF8","generic":true,"searching":true,"segments":"0-4.0,4.0-5.0,5.0-5.5,5.5-6.0,6.0-"},{"id":15,"cid":76,"groupId":11,"name":"\u5206\u8FA8\u7387","numeric":false,"unit":"","generic":true,"searching":false,"segments":""}]}];
	const params = {};
	specs.forEach(group => {
		group.params.forEach(param => {
			params[param.id] = param.name;
		})
	});
	// 初始化特有规格参数默认选中一个
	const indexes = {};
	const initIndex = skus[0].indexes.split("_");
	Object.keys(specialSpec).forEach((id, i) => {
		indexes[id] = parseInt(initIndex[i]);
	})
	const indexArr = skus.map(s => s.indexes);
</script>
<script>
	var itemVm = new Vue({
		el: "#itemApp",
		data: {
			ly,
			specialSpec,// 特有规格参数模板
			params,// 参数对象数组
			indexes,// 初始化被选中的参数
			num: 1,
		},
		methods: {
			decrement() {
				if (this.num > 1) {
					this.num--;
				}
			},
			increment() {
				this.num++;
			},
			addCart() {
				// 判断是否登录
				ly.http.get("/auth/verify").then(() => {
					// 已登录
					ly.http.post("/cart", {
						skuId: this.sku.id,
						title: this.sku.title,
						image: this.images[0],
						price: this.sku.price,
						num: this.num,
						ownSpec: JSON.stringify(this.ownSpec)
					}).then(() => {
						// 跳转到购物车列表页
						window.location.href = "http://www.leyou.com/cart.html";
					}).catch(() => {
						alert("添加购物车失败，请重试！");
					})
				}).catch(() => {
					// 获取以前的购物车
					const carts = ly.store.get("carts") || [];
					// 获取与当前商品id一致的购物车数据
					const cart = carts.find(c => c.skuId === this.sku.id);
					if (cart) {
						// 存在，修改数量
						cart.num += this.num;
					} else {
						// 不存在，新增
						carts.push({
							skuId: this.sku.id,
							title: this.sku.title,
							image: this.images[0],
							price: this.sku.price,
							num: this.num,
							ownSpec: JSON.stringify(this.ownSpec)
						})
					}
					// 未登录
					ly.store.set("carts", carts);
					// 跳转到购物车列表页
					window.location.href = "http://www.leyou.com/cart.html";
				})
			},
			locked(id, i) {
				// 如果只有一个可选项，永不锁定
				if(specialSpec[id].length === 1) return false;
				// 如果有其它项未选，不锁定
				let boo = true;
				Object.keys(this.indexes).forEach(key => {
					if (key !== id && this.indexes[key] == null) {
						boo = false;
						return;
					}
				});
				if (!boo) return false;
				// 如果当前项的组合不存在，锁定
				const {...o} = this.indexes;
				o[id] = i;
				const index = Object.values(o).join("_");
				return !indexArr.includes(index);
			},
			selectSku(id, i) {
				// 先判断当前选中的是否是锁定项
				const isLocked = this.locked(id, i);
				// 无论是否是锁定项，都允许修改
				this.indexes[id] = i;
				// 如果是锁定项，则需要调整其它项的选中状态
				if (isLocked) {
					Object.keys(this.indexes).forEach(key => {
						if (key !== id) {
							const remainSpec = specialSpec[key].filter((e, j) => !this.locked(key, j));
							this.indexes[key] = remainSpec.length === 1 ? specialSpec[key].findIndex(e => e === remainSpec[0]) : null;
						}
					})
				}
			}
		},
		computed: {
			sku() {
				if (Object.values(this.indexes).includes(null)) {
					return skus[0];
				}
				// 获取选中的规格参数的索引
				const index = Object.values(this.indexes).join("_");
				// 去skus集合寻找与index一致的sku
				return skus.find(s => s.indexes === index);
			},
			images() {
				return this.sku.images ? this.sku.images.split(",") : [];
			},
			specGroups() {
				// 获取特有规格参数值
				const ownSpec = JSON.parse(this.sku.ownSpec);
				specs.forEach(group => {
					group.params.forEach(param => {
						if (param.generic) {
							param.value = genericSpec[param.id];
						} else {
							param.value = ownSpec[param.id];
						}
					})
				})
				return specs;
			},
			ownSpec() {
				const ownSpec = JSON.parse(this.sku.ownSpec);
				const obj = {};
				Object.keys(ownSpec).forEach(id => {
					obj[this.params[id]] = ownSpec[id];
				})
				return obj;
			}
		},
		components: {
			lyTop: () => import('/js/pages/top.js')
		}
	});
</script>

<script type="text/javascript" src="/js/plugins/jquery/jquery.min.js"></script>
<script type="text/javascript">
	$(function () {
		$("#service").hover(function () {
			$(".service").show();
		}, function () {
			$(".service").hide();
		});
		$("#shopcar").hover(function () {
			$("#shopcarlist").show();
		}, function () {
			$("#shopcarlist").hide();
		});
	})
</script>
<script type="text/javascript" src="/js/model/cartModel.js"></script>
<script type="text/javascript" src="/js/plugins/jquery.easing/jquery.easing.min.js"></script>
<script type="text/javascript" src="/js/plugins/sui/sui.min.js"></script>
<script type="text/javascript" src="/js/plugins/jquery.jqzoom/jquery.jqzoom.js"></script>
<script type="text/javascript" src="/js/plugins/jquery.jqzoom/zoom.js"></script>
<script type="text/javascript" src="index/index.js"></script>
</body>

</html>